<!DOCTYPE html>
<html>
<head>
    <title>数据上传</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
</head>
<body class="bg-gray-100 min-h-screen flex flex-col">
    <div class="container mx-auto px-4 py-8">
        <div class="bg-white rounded-lg shadow-lg p-6 max-w-3xl mx-auto">
            <h1 class="text-2xl font-bold mb-6 text-center text-gray-800">数据上传与分析</h1>
            <form method="post" enctype="multipart/form-data" class="space-y-4">
                {% csrf_token %}
                <div class="mb-4">
                    <label for="id_file" class="block text-sm font-medium text-gray-700 mb-2">
                        <i class="fa fa-upload mr-2"></i>选择CSV文件
                    </label>
                    <div class="mt-1 flex justify-center px-6 pt-5 pb-6 border-2 border-gray-300 border-dashed rounded-md">
                        <div class="space-y-1 text-center">
                            <i class="fa fa-file-text-o text-gray-400 text-3xl"></i>
                            <div class="flex text-sm text-gray-600">
                                <label for="id_file" class="relative cursor-pointer bg-white rounded-md font-medium text-indigo-600 hover:text-indigo-500 focus-within:outline-none">
                                    <span>上传文件</span>
                                    {{ form.file }}
                                </label>
                                <p class="pl-1">或拖放文件</p>
                            </div>
                            <p class="text-xs text-gray-500">
                                支持CSV格式文件
                            </p>
                        </div>
                    </div>
                </div>
                <button type="submit" class="w-full bg-indigo-600 hover:bg-indigo-700 text-white font-medium py-2 px-4 rounded-md transition duration-200 ease-in-out flex items-center justify-center">
                    <i class="fa fa-arrow-right mr-2"></i>上传并分析
                </button>
            </form>
        </div>
    </div>
    <footer class="mt-auto py-4 bg-gray-800 text-white text-center">
        <div class="container mx-auto px-4">
            <p>© 2023 数据分析工具 | 使用 Django 和 ECharts 构建</p>
        </div>
    </footer>
</body>
</html>    